﻿import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class Index extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new _IndexState();
}
class _IndexState extends State<Index> {
  @override
  Widget build(BuildContext context) {
    List<String> bannerDatas = List();
    List<String> prizeDatas = List();
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);


    bannerDatas
    ..add("http://sucai.suoluomei.cn/sucai/images/20190301/4113bce54e815c8302449e695baa52a3.jpg")
    ..add('http://sucai.suoluomei.cn/sucai/images/20190703/97e278abeb2049b5cd6ce51876ba0e38.jpg')
    ..add('http://sucai.suoluomei.cn/sucai_zs/images/20190713/f94ba2ad406941f42ea082ced1877e21.jpg')
    ..add('http://cdn.suoluomei.com/public/hplwx/images/banner-equity-1.jpg?v=6');

    prizeDatas
    ..add("恭喜恒惘获得了1万积分")
    ..add("恭喜恒惘获得了10万积分")
    ..add("恭喜恒惘获得了100万积分")
    ..add("恭喜恒惘获得了500万积分");
    ..add("恭喜恒惘获得了1万积分")
    ..add("恭喜恒惘获得了10万积分")
    ..add("恭喜恒惘获得了100万积分")
    ..add("恭喜恒惘获得了500万积分");



    Widget titleSection = new Container(
      padding: const EdgeInsets.symmetric(vertical:20.0,horizontal:30.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: new Text(
                    '深圳市禾葡兰化妆品有限公司',
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Text(
                  '广东省深圳市龙岗区大运软件小镇2栋3楼',
                  style: new TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

    Widget textSection = new Container(
      padding: const EdgeInsets.symmetric(vertical:10.0, horizontal:30.0),
      child: new Text(
        '''
深圳市禾葡兰化妆品有限公司（HerbPlantist）是一家集产品研发、生产、销售与个性化服务于一体的知名护肤企业。禾葡兰整合全球行业资源，建立领先的供应链和服务链，与国际知名研发机构强强联合、开展最为前沿的皮肤护理领域的尖端生物科技研究，打造业界最具竞争力的护肤专业团队，为用户提供安全、有效、亲肤的产品与护肤解决方案，为女性创造美丽价值、成就靓丽人生。

禾葡兰作为移动社交零售电商模式领导者，以移动互联网技术为纽带，去除中间流通环节，直接链接禾粉、服务禾粉，提供个性化定制的护肤解决方案，最大化地满足禾粉需求。

品牌释义：禾之柔嫩、葡之通透、兰之莹白，由[禾]、[葡]、[兰]直观地组成了[禾葡兰]品牌，清晰地传递了禾葡兰追求绿色草本、天然萃取、天人合一的品牌价值与内涵。
        ''',
        softWrap: true,
      ),
    );

    //广告轮播
    Widget swiperBanner = new Container(
      color: Color(0xFFFFFFFF),
      padding: const EdgeInsets.symmetric(vertical:10.0),
      width: 375.0,
      //1.8是banner宽高比，0.8是viewportFraction的值
      height: 375.0 / 1.8 * 0.8,
      child: Swiper(
        itemCount: bannerDatas.length,
        //item数量
        itemBuilder: (BuildContext context, int index) {
          //item构建
          return Container(                     // 用Container实现图片圆角的效果
            decoration: BoxDecoration(
              image: DecorationImage(
                image: new NetworkImage(
                  bannerDatas[index],
                ),  // 图片数组
                fit: BoxFit.cover,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(15.0),
              ),
            ),
          );
        },
        autoplay: true,
        //是否自动播放
        autoplayDelay: 3000,
        //自动播放延迟
        autoplayDisableOnInteraction: true,
        //触发时是否停止播放
        duration: 600,
        //动画时间
        // control: new SwiperControl(),
        //默认分页按钮
        //默认指示器
        pagination: new SwiperPagination(
          // SwiperPagination.fraction 数字1/5，默认点
          builder: new DotSwiperPaginationBuilder(
            color:Color(0x89E2E0E0),
            size: 8,
            activeSize: 9
            ),
        ),
        viewportFraction: 0.8,
        //视图宽度，即显示的item的宽度屏占比
        scale: 0.8,
        //两侧item的缩放比
      ),
    );

    //新闻轮播
    Widget news = new Container(
      decoration: new BoxDecoration(
        color: Color(0xFFFFFFFF),
        borderRadius: new BorderRadius.all(new Radius.circular(12.0)),
      ),
      margin: EdgeInsets.symmetric(vertical:12.0,horizontal:24.0),
      padding: EdgeInsets.symmetric(vertical:3.0),
      height: 26.0,
      child: new Row(
        children: <Widget>[
          Expanded(
            flex:1,
            child: new Icon(
              Icons.volume_up,
              color: Color(0x62ff1111),
              size:20.0
            )
          ),
          Expanded(
            flex:8,
            child: new Container(
              // padding: EdgeInsets.symmetric(vertical:3.0),
              child: Swiper(
                scrollDirection:Axis.vertical,
                itemCount: prizeDatas.length,
                //item数量
                itemBuilder: (BuildContext context, int index) {
                  return Text(
                    prizeDatas[index],
                    style: new TextStyle(
                      color: Color(0xFF333333),
                    ),
                  );
                },
                autoplay: true,
                //是否自动播放
                autoplayDelay: 3000,
                //自动播放延迟
                autoplayDisableOnInteraction: true,
                //触发时是否停止播放
                duration: 500,
              ),
            )
          ),
          Expanded(
            flex:1,
            child: new Icon(
              Icons.keyboard_arrow_right,
              color: Color(0xFF999999),
              size:20.0
            )
          ),
        ],
      ),
    );

    //常用功能
    Widget constTool = new Container(
      height: 288.0,
      margin: const EdgeInsets.symmetric(horizontal:10.0),
      padding: const EdgeInsets.symmetric(vertical:15.0),
      decoration: BoxDecoration(
        color: Color(0xFFFFFFFF),
        borderRadius: BorderRadius.circular(15.0),
        boxShadow: [BoxShadow(color: Color(0x87e9d4d6),spreadRadius: 4.0,blurRadius: 10.0,offset: Offset(1.0, 1.0))],
      ),
      child: new Column(
        mainAxisAlignment:MainAxisAlignment.spaceBetween,
        crossAxisAlignment:CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
            width: 74.0,
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Color(0xFF13c9cc), Color(0xFF10e278)]
              ),
              borderRadius: BorderRadius.horizontal(right:Radius.circular(20)),
            ),
            padding: EdgeInsets.all(5.0),
            child: Text("常用功能",
              style: new TextStyle(color: Colors.white),
              textAlign:TextAlign.center
            ),
          ),
          new Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180703152810.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text("官方网站",
                      style:new TextStyle(fontSize: ScreenUtil().setSp(26)),
                      textAlign:TextAlign.center
                    )
                  ]
                ),
                flex: 1,
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180620163939.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text("积分商城",
                    style:new TextStyle(fontSize: ScreenUtil().setSp(26)),
                    textAlign:TextAlign.center),
                  ]
                ),
                flex: 1,
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180620164151.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text("商城订单",
                    style:new TextStyle(fontSize: ScreenUtil().setSp(26)),
                    textAlign:TextAlign.center),
                  ],
                ),
                flex: 1,
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180620164132.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text("积分任务",
                    style:new TextStyle(fontSize: ScreenUtil().setSp(26)),
                    textAlign:TextAlign.center),
                  ],
                ),
                flex: 1,
              ),
            ],
          ),
          new Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180620164141.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text("肌肤测试",
                    style:new TextStyle(fontSize: ScreenUtil().setSp(26)),
                    textAlign:TextAlign.center),
                  ]
                ),
                flex: 1,
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180620164122.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text("最美禾粉",
                    style:new TextStyle(fontSize: ScreenUtil().setSp(26)),
                    textAlign:TextAlign.center),
                  ]
                ),
                flex: 1,
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180622143146.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text("护肤打卡",
                    style:new TextStyle(fontSize: ScreenUtil().setSp(26)),
                    textAlign:TextAlign.center),
                  ]
                ),
                flex: 1,
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    new Image.network(
                      'http://h-cdn.zealcdn.cn/20180703105754.png',
                      width: 80.0,height: 80.0,fit: BoxFit.cover,
                    ),
                    new Text(". . .",
                    style:new TextStyle(fontWeight: FontWeight.w900,fontSize: ScreenUtil().setSp(30)),
                    textAlign:TextAlign.center),
                  ],
                ),
                flex: 1,
              ),
            ],
          ),
        ],
      ),
    );

    //帮助专区
    Widget helpSite = new Container(
      height: 160.0,
      margin: const EdgeInsets.symmetric(horizontal:10.0,vertical: 10.0),
      padding: const EdgeInsets.symmetric(vertical:15.0),
      decoration: BoxDecoration(
        color: Color(0xFFFFFFFF),
        borderRadius: BorderRadius.circular(15.0),
        boxShadow: [BoxShadow(color: Color(0x87e9d4d6),spreadRadius: 4.0,blurRadius: 10.0,offset: Offset(1.0, 1.0))],
      ),
      child: new Column(
        mainAxisAlignment:MainAxisAlignment.spaceBetween,
        crossAxisAlignment:CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
            width: 74.0,
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Color(0xFF13c9cc), Color(0xFF10e278)]
              ),
              borderRadius: BorderRadius.horizontal(right:Radius.circular(20)),
            ),
            padding: EdgeInsets.all(5.0),
            child: Text("帮助专区",
              style: new TextStyle(color: Colors.white),
              textAlign:TextAlign.center
            ),
          ),
          new Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  margin: const EdgeInsets.only(bottom:10),
                  child: new Column(
                    children: <Widget>[
                      new Image.network(
                        'http://h-cdn.zealcdn.cn/20180621103231.png',
                        width: 100.0,height: 85.0,fit: BoxFit.contain,
                      ),
                    ]
                  )
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  margin: const EdgeInsets.only(bottom:10),
                  child: new Column(
                    children: <Widget>[
                      new Image.network(
                        'http://h-cdn.zealcdn.cn/20180621103243.png',
                        width: 100.0,height: 85.0,fit: BoxFit.contain,
                      )
                    ]
                  )
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  margin: const EdgeInsets.only(bottom:10),
                  child: new Column(
                    children: <Widget>[
                      new Image.network(
                        'http://h-cdn.zealcdn.cn/20180621103253.png',
                        width: 100.0,height: 85.0,fit: BoxFit.contain,
                      )
                    ]
                  )
                ),
                flex: 1,
              )
            ],
          ),
        ]
      )
    );

    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        backgroundColor: Color(0xFFEBEBEB),
        appBar: new AppBar(
          title: new Text('首页'),
          // backgroundColor: Color(0xEBF2F2F2),
          elevation: 2.0,
          centerTitle:true,
        ),
        body: new ListView(
          children: [
            swiperBanner,
            news,
            constTool,
            helpSite
          ],
        ),
      ),
      theme: new ThemeData(
        primaryColor:Colors.white   // 设置主题颜色
      ),
    );
  }
}
